<template>
  <div class="flex flex_column">

    <!--彩稿订单 -->
    <el-dialog
      append-to-body
      title="选择工艺"
      :visible.sync="isVisible"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="70%"
      @close="closeMarDialog"
      @open="openCart"
    >
      <div class="dialogDody marDialog flex flex_column">
        <div class="btnCon flex flex_end">
          <!--      搜索框-->
          <div class="search">
            <el-input
              v-model="materalSearch.likeWords"
              placeholder="输入关键字"
              size="small"
            >
              <el-button
                slot="append"
                v-loading="marLoading"
                type="primary"
                icon="el-icon-search"
                :disabled="marLoading"
                element-loading-spinner="el-icon-loading"
                @click="MarterdialogShow"
              >
                搜索
              </el-button>
            </el-input>
          </div>
        </div>
        <!-- 表格区域       -->
        <div class="tableCon">
          <el-table
            ref="multipleTable"
            :data="materialList"
            border
            height="500"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column prop="code" label="工艺编号" />
            <el-table-column prop="name" label="工艺名称" />
            <el-table-column prop="remarks" label="备注" />
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isVisible = false">取 消</el-button>
        <!-- 选择订单 -->
        <el-button
          v-loading="addLoading"
          :disabled="addLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="saveColorManuscript"
        >
          确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'SelectCraftlist',
  props: {
    selectCode: {
      type: String,
      default: ''
    },
    perVisible: {
      type: Boolean,
      required: false
    }
  },
  data() {
    return {
      materialList: [
      ], // 订单列表
      templateSelection: {},
      radio: '',
      materalSearch: {
        likeWords: ''
      }, // 彩稿列表明细搜索条件
      radioSelect: null,
      currentRow: null,
      marLoading: false,
      addLoading: false,
      multipleSelection: []
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.perVisible
      },
      set(val) {
        this.$emit('update:perVisible', val)
      }
    }},
  created() {

  },
  mounted() {},

  methods: {
    openCart() {
      this.materalSearch.likeWords = ''
      this.$nextTick(() => {
        this.$refs.multipleTable.clearSelection()
      })
      this.MarterdialogShow()
    },
    closeMarDialog() {
      this.isVisible = false
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 工艺列表
    MarterdialogShow() {
      const parmas = this.materalSearch
      this.marLoading = true
      this.$api.product
        .GetMatchProductCrafts(parmas)
        .then((res) => {
          this.materialList = res
          this.marLoading = false
        })
        .catch(() => {})
    },
    saveColorManuscript() {
      if (this.multipleSelection.length > 0) {
        this.$emit('refuseLists', this.multipleSelection)
        this.isVisible = false
      } else {
        this.$message({
          message: '请选择工艺',
          type: 'error'
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
